{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>吾要课堂首页</title>
    <link type="text/css" rel="stylesheet" href="{% static 'css/base_51kt.css' %}">
    <link rel="shortcut icon" href="{% static 'images/ilync.ico' %}" type="image/x-icon">
</head>

<body>
    <!-- 顶部导航栏--开始 -->
    <div class="top_nav">
        <div class="nav_center">
            <div class="left">
                <a href="#">热门课程</a>
                <a href="#">组合优惠</a>
                <a href="#">直播课程</a>
                <a href="#">免费课程</a>
                <a href="#">限时优惠</a>
            </div>
            <div class="right">
                <a href="#">加入会员</a>
                <a href="#">登陆/注销</a>
                <a href="#">企业服务</a>
                <a href="#">我要听课</a>
                <a href="#">我要开课</a>
            </div>
        </div>
    </div>
    <!-- 顶部导航栏--结束 -->

    <!-- 标题栏--开始 -->
    <div class="header">
        <div class="logo">
            <img src="{% static 'images/51kt.png' %}">
            <img src="{% static 'images/51kt02.png' %}">
        </div>
        <div class="search">
            <form>
                <input type="text" name="search" placeholder="搜索..">
            </form>
        </div>
    </div>
    <!-- 标题栏--结束 -->

    <!-- 导航栏01 --- 开始 -->
    <div class="nav">
        <div class="left">
            <img src="{% static 'images/3hr.png' %}">
            学习直通车
        </div>
        <div class="right">
            <a href="#">免费</a>
            <a href="#">秒杀</a>
            <a href="#">限免</a>
            <span>|</span>
            <a href="#">视频课程</a>
            <a href="#">学习专题</a>
            <a href="#">职位推荐</a>
            <span>|</span>
            <a href="#">课程排行榜</a>
        </div>
    </div>
    <!-- 导航栏01 --- 结束 -->

    <!-- 大图部分--- 开始 -->
    <div class="big_img">
        <div class="img_center">
            <img src="{% static 'images/big02.png' %}">
            <div class="course_type">
                <div class="item">
                    <h5>
                        <a href="">云计算</a>
                        <a href="">人工智能</a>
                        <a href="">大数据</a>
                    </h5>
                    <p>
                        <a href="">Docker</a>
                        <a href="">深度学习</a>
                        <a href="">Hadoop</a>
                    </p>
                </div>
                <div class="item">
                    <h5>
                        <a href="">云计算</a>
                        <a href="">人工智能</a>
                        <a href="">大数据</a>
                    </h5>
                    <p>
                        <a href="">Docker</a>
                        <a href="">深度学习</a>
                        <a href="">Hadoop</a>
                    </p>
                </div>
                <div class="item">
                    <h5>
                        <a href="">云计算</a>
                        <a href="">人工智能</a>
                        <a href="">大数据</a>
                    </h5>
                    <p>
                        <a href="">Docker</a>
                        <a href="">深度学习</a>
                        <a href="">Hadoop</a>
                    </p>
                </div>
                <div class="item">
                    <h5>
                        <a href="">云计算</a>
                        <a href="">人工智能</a>
                        <a href="">大数据</a>
                    </h5>
                    <p>
                        <a href="">Docker</a>
                        <a href="">深度学习</a>
                        <a href="">Hadoop</a>
                    </p>
                </div>
                <div class="item">
                    <h5>
                        <a href="">云计算</a>
                        <a href="">人工智能</a>
                        <a href="">大数据</a>
                    </h5>
                    <p>
                        <a href="">Docker</a>
                        <a href="">深度学习</a>
                        <a href="">Hadoop</a>
                    </p>
                </div>
            </div>
            <div class="news">
                <h3>学院新闻</h3>
                <hr>
                <ul>
                    <li><a>小程序就业实战课程！</a></li>
                    <li><a>Django实战课程正式上线！</a></li>
                    <li><a>开发者社群震撼来袭！</a></li>
                    <li><a>Java入门课程6月1日直播！</a></li>
                    <li><a>软考备战专题！</a></li>
                    <li><a>吾要课堂提供在线答疑服务！</a></li>
                    <li><a>Java入门课程6月1日直播！</a></li>
                    <li><a>软考备战专题！</a></li>
                    <li><a>吾要课堂提供在线答疑服务！</a></li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 大图部分 --- 结束 -->

    <!-- 控制间隙  -->
    <div style="height:40px;"></div>
    <!-- 内容标题 开始 -->
    <div class="content_header">
        <div>
            <div class="left">
                <img src="{% static 'images/course.png' %}">
                <h2>-畅.销.好.课-</h2>
            </div>
            <div class="right">
                <a href="#">更多>></a>
                <a href="#">Python</a>
                <a href="#">Java</a>
                <a href="#">Mysql</a>
                <a href="#">C/C++</a>
                <a href="#">Oracle</a>
            </div>
        </div>
        <hr>
    </div>
    <!-- 内容标题 开始 -->

    <!-- 内容区域01 --- 畅销好课  --开始 -->
    <div class="content">
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>.NET系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>王进</li>
                    <li>高级</li>
                    <li>101</li>
                </ul>
                <ul class="price">
                    <li>58</li>
                    <li>46</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Web前端开发值HTML5实战</h5>
                <ul class="middle">
                    <li>陈鹏</li>
                    <li>中级</li>
                    <li>1801</li>
                </ul>
                <ul class="price">
                    <li>199</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>Java系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>陈小峰</li>
                    <li>中级</li>
                    <li>450</li>
                </ul>
                <ul class="price">
                    <li>149</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Django开发项目实战</h5>
                <ul class="middle">
                    <li>刘明</li>
                    <li>高级</li>
                    <li>981</li>
                </ul>
                <ul class="price">
                    <li>159</li>
                    <li>59</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>.NET系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>王进</li>
                    <li>高级</li>
                    <li>101</li>
                </ul>
                <ul class="price">
                    <li>58</li>
                    <li>46</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Web前端开发值HTML5实战</h5>
                <ul class="middle">
                    <li>陈鹏</li>
                    <li>中级</li>
                    <li>1801</li>
                </ul>
                <ul class="price">
                    <li>199</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>Java系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>陈小峰</li>
                    <li>中级</li>
                    <li>450</li>
                </ul>
                <ul class="price">
                    <li>149</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Django开发项目实战</h5>
                <ul class="middle">
                    <li>刘明</li>
                    <li>高级</li>
                    <li>981</li>
                </ul>
                <ul class="price">
                    <li>159</li>
                    <li>59</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 内容区域01 --- 畅销好课  --结束 -->

    <!-- 控制间隙  -->
    <div style="height:30px;"></div>

    <div class="content_header">
        <div>
            <div class="left">
                <img src="{% static 'images/course.png' %}">
                <h2>-新.课.上.架-</h2>
            </div>
            <div class="right">
                <a href="#">更多>></a>
                <a href="#">Python</a>
                <a href="#">Java</a>
                <a href="#">Mysql</a>
                <a href="#">C/C++</a>
                <a href="#">Oracle</a>
            </div>
        </div>
        <hr>
    </div>
    <!-- 内容区域01 --- 新品上架 --开始 -->
    <div class="content">
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>.NET系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>王进</li>
                    <li>高级</li>
                    <li>101</li>
                </ul>
                <ul class="price">
                    <li>58</li>
                    <li>46</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Web前端开发值HTML5实战</h5>
                <ul class="middle">
                    <li>陈鹏</li>
                    <li>中级</li>
                    <li>1801</li>
                </ul>
                <ul class="price">
                    <li>199</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>Java系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>陈小峰</li>
                    <li>中级</li>
                    <li>450</li>
                </ul>
                <ul class="price">
                    <li>149</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Django开发项目实战</h5>
                <ul class="middle">
                    <li>刘明</li>
                    <li>高级</li>
                    <li>981</li>
                </ul>
                <ul class="price">
                    <li>159</li>
                    <li>59</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>.NET系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>王进</li>
                    <li>高级</li>
                    <li>101</li>
                </ul>
                <ul class="price">
                    <li>58</li>
                    <li>46</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Web前端开发值HTML5实战</h5>
                <ul class="middle">
                    <li>陈鹏</li>
                    <li>中级</li>
                    <li>1801</li>
                </ul>
                <ul class="price">
                    <li>199</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>Java系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>陈小峰</li>
                    <li>中级</li>
                    <li>450</li>
                </ul>
                <ul class="price">
                    <li>149</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Django开发项目实战</h5>
                <ul class="middle">
                    <li>刘明</li>
                    <li>高级</li>
                    <li>981</li>
                </ul>
                <ul class="price">
                    <li>159</li>
                    <li>59</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 内容区域01 --- 新品上架 --结束 -->


    <!-- 控制间隙  -->
    <div style="height:30px;"></div>
    <div class="content_header">
        <div>
            <div class="left">
                <img src="{% static 'images/course.png' %}">
                <h2>-精.品.专.题-</h2>
            </div>
            <div class="right">
                <a href="#">更多>></a>
                <a href="#">Python</a>
                <a href="#">Java</a>
                <a href="#">Mysql</a>
                <a href="#">C/C++</a>
                <a href="#">Oracle</a>
            </div>
        </div>
        <hr>
    </div>
    <!-- 内容区域03 --- 精品专题 --开始 -->
    <div class="content">
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>.NET系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>王进</li>
                    <li>高级</li>
                    <li>101</li>
                </ul>
                <ul class="price">
                    <li>58</li>
                    <li>46</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Web前端开发值HTML5实战</h5>
                <ul class="middle">
                    <li>陈鹏</li>
                    <li>中级</li>
                    <li>1801</li>
                </ul>
                <ul class="price">
                    <li>199</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>Java系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>陈小峰</li>
                    <li>中级</li>
                    <li>450</li>
                </ul>
                <ul class="price">
                    <li>149</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Django开发项目实战</h5>
                <ul class="middle">
                    <li>刘明</li>
                    <li>高级</li>
                    <li>981</li>
                </ul>
                <ul class="price">
                    <li>159</li>
                    <li>59</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>.NET系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>王进</li>
                    <li>高级</li>
                    <li>101</li>
                </ul>
                <ul class="price">
                    <li>58</li>
                    <li>46</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Web前端开发值HTML5实战</h5>
                <ul class="middle">
                    <li>陈鹏</li>
                    <li>中级</li>
                    <li>1801</li>
                </ul>
                <ul class="price">
                    <li>199</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_csharp.jpg' %}">
            <div>
                <h5>Java系列课程第二季面向对象</h5>
                <ul class="middle">
                    <li>陈小峰</li>
                    <li>中级</li>
                    <li>450</li>
                </ul>
                <ul class="price">
                    <li>149</li>
                    <li>99</li>
                </ul>
            </div>
        </div>
        <div class="course">
            <img src="{% static 'images/course_html.png' %}">
            <div>
                <h5>Django开发项目实战</h5>
                <ul class="middle">
                    <li>刘明</li>
                    <li>高级</li>
                    <li>981</li>
                </ul>
                <ul class="price">
                    <li>159</li>
                    <li>59</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 内容区域03 --- 精品专题 --结束 -->

    <!-- 控制间隙  -->
    <div style="height:30px;"></div>
    <div class="content_header">
        <div>
            <div class="left">
                <img src="{% static 'images/course.png' %}">
                <h2>-学.员.必.读-</h2>
            </div>

        </div>
        <hr>
    </div>

    <!-- 内容区域04 --- 学生必读 --开始 -->
    <div class="content_reader">
        <div class="item">
            <h2>初学问题思考</h2>
            <hr>
            <ul>
                <li><a href="#">我是否适合学软件开发？</a></li>
                <li><a href="#">我应该选择什么计算机语言？</a></li>
                <li><a href="#">我该如何快速入门？</a></li>
                <li><a href="#">在学习前我该准备一台什么样的计算机？</a></li>
                <li><a href="#">遇到问题我应该如何寻求帮助？</a></li>
                <li><a href="#">如何获取课程中的源代码？</a></li>
                <li><a href="#">学完后有没有好的工作推荐？</a></li>
            </ul>
        </div>
        <div class="item">
            <h2>关于如何学习</h2>
            <hr>
            <ul>
                <li><a href="#">我是否适合学软件开发？</a></li>
                <li><a href="#">我应该选择什么计算机语言？</a></li>
                <li><a href="#">我该如何快速入门？</a></li>
                <li><a href="#">在学习前我该准备一台什么样的计算机？</a></li>
                <li><a href="#">遇到问题我应该如何寻求帮助？</a></li>
                <li><a href="#">如何获取课程中的源代码？</a></li>
                <li><a href="#">学完后有没有好的工作推荐？</a></li>
            </ul>
        </div>
        <div class="item">
            <h2>技术文章阅读</h2>
            <hr>
            <ul>
                <li><a href="#">我是否适合学软件开发？</a></li>
                <li><a href="#">我应该选择什么计算机语言？</a></li>
                <li><a href="#">我该如何快速入门？</a></li>
                <li><a href="#">在学习前我该准备一台什么样的计算机？</a></li>
                <li><a href="#">遇到问题我应该如何寻求帮助？</a></li>
                <li><a href="#">如何获取课程中的源代码？</a></li>
                <li><a href="#">学完后有没有好的工作推荐？</a></li>
            </ul>
        </div>
    </div>
    <!-- 内容区域04 --- 学生必读 --结束 -->

    <!-- 控制间隙  -->
    <div style="height:30px;"></div>

    <div class="footer">
        <div>
            <div>
                <h3>新手指南</h3>
                <div>
                    <a href="">如何购买</a>
                    <a href="">如何使用优惠卷</a>
                    <a href="">如何开发票</a>
                    <a href="">退款政策</a>
                </div>
            </div>
            <div>
                <h3>关于课程</h3>
                <div>
                    <a href="">手机上如何看视频</a>
                    <a href="">如何下载资料</a>
                    <a href="">视频卡顿的反馈</a>
                    <a href="">想学习的课程登记</a>
                </div>
            </div>
            <div>
                <h3>互动交流</h3>
                <div>
                    <a href="">学习QQ群</a>
                    <a href="">意见返回</a>
                    <a href="">论坛交流</a>
                    <a href="">资料下载</a>
                </div>
            </div>
            <div>
                <h3>关于我们</h3>
                <div>
                    <a href="">关于我们</a>
                    <a href="">内容合作</a>
                    <a href="">合作机构</a>
                    <a href="">友情链接</a>
                </div>
            </div>
            <div>
                <div>服务电话：</div>
                <h2>488-888-888</h2>
            </div>
            <div>
                <img src="{% static 'images/er.png' %}">
            </div>
        </div>
    </div>
</body>

</html>